<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar class="bg-primary text-white" style="height: 68px">
        <q-btn
          flat
          dense
          round
          @click="leftDrawerOpen = !leftDrawerOpen"
          aria-label="Menu"
          class="on-left"
        >
          <q-icon name="menu" size="27px"/>
        </q-btn>

        <q-toolbar-title>
          <q-img src="statics/dm.png" style="height: 32px; width: 124px" />
        </q-toolbar-title>

      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      :content-style="{ borderRight: '1px solid ' + colors.secondary }"
      content-class="bg-primary"
    >
      <left-header />
      <left-menu />
    </q-drawer>

    <q-page-container>
      <q-page :style="{ height: windowHeight }" class="bg-secondary">
        <q-scroll-area :thumb-style="thumbStyle" class="fit">
          <router-view />
        </q-scroll-area>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
import LeftMenu from './LeftMenu/LeftMenu'
import { mapGetters } from 'vuex'
// import { colors } from 'quasar'
import LeftHeader from './LeftHeader/LeftHeader'

export default {
  name: 'MyLayout',
  components: {
    LeftMenu,
    LeftHeader
  },
  data () {
    return {
      leftDrawerOpen: this.$q.platform.is.desktop,
      thumbStyle: {
        right: '5px',
        borderRadius: '8px',
        backgroundColor: '#fff',
        width: '8px',
        opacity: 0.5
      }
    }
  },
  computed: {
    ...mapGetters('theme', {
      colors: 'colors'
    }),
    windowHeight () {
      return window.innerHeight - 68 + 'px'
    }
  },
  methods: {
  }
}
</script>

<style lang="stylus">
  .drawer-border
    border-right 3px solid $primary
</style>
